<template>
	<div class="report-container">
		<div class="title">
			<img src="@/static/images/title.png" class="img" mode="scaleToFill" />
		</div>
		<div class="grade-box">
			<div class="grade">
				{{ zonghe_grade }}
			</div>
			<div class="desc">你的评分</div>
		</div>

		<div class="report-section section01">
			<div class="title">评分解读</div>
			<div class="evaluate-box">
				<div class="tag">评估</div>
				<div class="time">{{ createTime }}</div>
			</div>
			<div class="explain">
				<div class="p">评分解读:</div>
				<div class="box">
					<div class="item">
						<div class="grade">0-10</div>
						<div class="desc">极差</div>
					</div>
					<div class="item">
						<div class="grade">10-20</div>
						<div class="desc">较差</div>
					</div>
					<div class="item">
						<div class="grade">21-55</div>
						<div class="desc">一般</div>
					</div>
					<div class="item">
						<div class="grade">55-80</div>
						<div class="desc">良好</div>
					</div>
					<div class="item">
						<div class="grade">80-100</div>
						<div class="desc">优秀</div>
					</div>
				</div>
			</div>
			<div class="description">评分仅供参考，此为不安全分数本报告包含身份校验、消费风险，失信等多个维度，是根据网络行为综合评估的，不包含个人隐私爬虫数据</div>
			<div class="tip-pic">
				<img v-if="zonghe_grade <= 20" src="@/static/images/tip-reject.png" class="img" />
				<img v-if="zonghe_grade > 55" src="@/static/images/pass.png" class="img" />
			</div>
		</div>

		<div class="report-section section02">
			<div class="title">信息匹配</div>
			<div class="content">
				<div class="top">
					<img v-if="sys_eq" src="@/static/images/pp.png" class="img" />
					<img v-else src="@/static/images/bpp.png" class="img" />
					<div class="desc">身份证/姓名/手机号{{ sys_eq ? '匹配' : '不匹配' }}</div>
				</div>
				<div class="bottom">
					<div class="line">
						<p class="desc">基本信息</p>
						<p class="info">{{ username }}</p>
					</div>
					<div class="line">
						<p class="desc">身份证号</p>
						<p class="info">{{ identity }}</p>
					</div>
					<div class="line">
						<p class="desc">手机号</p>
						<p class="info">{{ tel }}</p>
					</div>
					<div class="line">
						<p class="desc">手机号码归属地</p>
						<p class="info">{{ sys_province }}-{{ sys_city }}</p>
					</div>
					<div class="line">
						<p class="desc">手机号码运营商</p>
						<p class="info">{{ sys_attribute }}</p>
					</div>
					<div class="line">
						<p class="desc">黑名单逾期验证报告编号</p>
						<p class="info">{{ orderNo }}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="report-section section03">
			<div class="title">风险命中</div>
			<div class="content">
				<div class="risk">
					<div class="left">
						<div class="box">
							<div class="line">风险项</div>
							<div class="line">（{{ mzInfo.length }}项）</div>
						</div>

					</div>
					<div class="right">
						<div v-for="(item, index) in mzInfo" :key="item.id" class="line">
							{{ index + 1 + '）' + item.name_rule }}
						</div>
					</div>
				</div>
				<div class="proposal">
					<div class="sub">说明</div>
					<div class="p">
						一般风险：指30/60/90天逾期资信不佳。<br />
						中风险：客户有过贷款逾期90天以上未还。<br />
						高风险：客户逾期后失联。<br />
						申请极少、极多、频繁都会命中风险规则。 申请极少的权重达不到拒绝风险，极少这里只是申请类型的展示。申请的次数越多越频繁，命中的风险规则越大。
					</div>
				</div>
			</div>
		</div>

		<div class="reportModel">
			<div class="title" style="height: 40px;">
				<div class="left" style="width:160px;">自身风险筛查</div>
			</div>
			<div class="risk">
				<!--                <img src="@/static/images/exponent.jpg" style="width: 200px"/>-->
				<!--                <div class="riskp">风险指数（低→高）</div>-->
				<div id="echart00" style="width: 100%;height: 180px;"></div>
				<div class="hit">
					<div class="hitContent">
						<div style="margin-bottom: 10px;">{{ sl_id_allnum }}</div>
						<div>身份证命中风险/次</div>
					</div>
					<div class="hitContent">
						<div style="margin-bottom: 10px;">{{ sl_cell_allnum }}</div>
						<div>手机号命中风险/次</div>
					</div>
				</div>
				<div class="explain" style="width:90%;margin:0 0 15px;">
					<div class="explainTitle">说明</div>
					<div class="explainDesc">
						1.查询范围：银行、非银：持牌网络小贷、持牌小贷、持牌消费金融、持牌融资租赁、持牌汽车金融、其他（信保、信托等)。<br />
						2.查询类型：法院失信人、被执行人、限制高消费、逾期（一般风险、中风险、高风险、资信不佳、拒绝)。
					</div>
				</div>
			</div>
		</div>

		<div class="reportModel">
			<div class="title" style="height: 40px;">
				<div class="left" style="width:175px">借贷申请数据</div>
			</div>
			<div class="charts">
				<div class="echart" id="mychart" :style="myChartStyle"></div>
			</div>
			<div class="proposal" style="width:90%">
				<div class="proposalTitle">建议</div>
				<div class="proposalDesc">请保持良好的借贷习惯,切勿频繁申请,拒绝不明平台的审核邀请。</div>
			</div>

			<div class="searchTime">
				<div :class="[searchTimeIndex == index ? 'timeItem timeItemActive' : 'timeItem']"
					v-for="(item, index) in searchTime" @click="searchTimeIndex = index +''" :key="index">
					{{ item }}
				</div>
			</div>
			<div class="searchContent" v-for="(item,index) in searchpData" :key="index">
				<div class="searchTitle">
					{{ item.title }}
					<div class="searchHr"></div>
				</div>
				<div class="searchp" v-for="(v, k) in item.item" :key="k">
					<div>{{ v }}</div>
					<div>
						{{ searchData[searchTimeIndex][index][k][0] }}家&nbsp;&nbsp;
						{{ searchData[searchTimeIndex][index][k][1] }}次
					</div>
				</div>
			</div>
			<div class="explain" style="width:90%">
				<div class="explainTitle">说明</div>
				<div class="explainDesc">
					此数据不是借贷数据，是借贷申请机构数（家）和借贷申请次数（次）<br />
					借贷申请机构数（家）=按身份证号查询命中机构数+按手机号查询命中机构数<br />
					借贷申请次数（次）=按身份证号查询命中次数+按手机号查询命中次数
				</div>
			</div>
			<div class="proposal" style="width:90%">
				<div class="proposalTitle">建议</div>
				<div class="proposalDesc">报告检测的是12个月内的申请数据，含同一机构，如果申请过于频繁会对评分有影响，请保持良好的借贷习惯，切勿频繁申请。</div>
			</div>
			<div class="reportTable">
				<div class="tableTitle">详细业务类型申请行为（次数）</div>
				<table>
					<tr>
						<th></th>
						<th>近15天</th>
						<th>近1个月</th>
						<th>近3个月</th>
						<th>近6个月</th>
						<th>近12个月</th>
					</tr>
					<tr v-for="(item,index) of tableData1" :key="index">
						<td>{{ item.title }}</td>
						<td>{{ item.d15 }}</td>
						<td>{{ item.m1 }}</td>
						<td>{{ item.m3 }}</td>
						<td>{{ item.m6 }}</td>
						<td>{{ item.m12 }}</td>
					</tr>
					<tr v-if="tableData1.length==0">
						<td colspan="6">暂无</td>
					</tr>
				</table>
			</div>

			<div class="explain" style="width:90%;margin-bottom:0">
				<div class="explainTitle">说明</div>
				<div class="explainDesc">
					借贷申请次数=按身份证号查询命中次数+按手机号查询命中次数<br />
					消费类分期:借贷用于购买消费品并分期偿还的业务<br />
					现金类分期:支取现金并分期偿还的业务<br />
					代偿类分期:借贷用于偿还已有借款并分期偿还的业务<br />
					非银其他:包括担保、信保等。<br />
				</div>
			</div>

			<div class="reportTable">
				<div class="tableTitle">关联机构类型详情</div>
				<table>
					<tr>
						<th></th>
						<th>近15天</th>
						<th>近1个月</th>
						<th>近3个月</th>
						<th>近6个月</th>
						<th>近12个月</th>
					</tr>
					<tr v-for="(item,index) of tableData2" :key="index">
						<td>{{ item.title }}</td>
						<td>{{ item.d15 }}</td>
						<td>{{ item.m1 }}</td>
						<td>{{ item.m3 }}</td>
						<td>{{ item.m6 }}</td>
						<td>{{ item.m12 }}</td>
					</tr>

					<tr v-if="tableData2.length==0">
						<td colspan="6">暂无</td>
					</tr>
				</table>
			</div>
			<div class="explain" style="width:90%">
				<div class="explainTitle">说明</div>
				<div class="explainDesc">
					借贷申请机构数=按身份证号查询命中机构数+按手机号查询命中机构数
				</div>
			</div>
			<div class="proposal" style="width:90%">
				<div class="proposalTitle">建议</div>
				<div class="proposalDesc">减少申请借贷频率，保持良好的借贷习惯。</div>
			</div>
		</div>

		<div class="reportModel">
			<div class="title" style="height: 50px;">
				<div class="left" style="width:175px">借贷申请时段</div>
			</div>
			<div class="reportTable">
				<table>
					<tr>
						<th></th>
						<th>近15天</th>
						<th>近1个月</th>
						<th>近3个月</th>
						<th>近6个月</th>
						<th>近12个月</th>
					</tr>
					<tr v-for="(item,index) of tableData3" :key="index">
						<td>{{ item.title }}</td>
						<td>{{ item.d15 }}</td>
						<td>{{ item.m1 }}</td>
						<td>{{ item.m3 }}</td>
						<td>{{ item.m6 }}</td>
						<td>{{ item.m12 }}</td>
					</tr>
					<tr v-if="tableData3.length==0">
						<td colspan="6">暂无</td>
					</tr>
				</table>

			</div>
			<div class="explain" style="width:90%;margin-bottom:15px;">
				<div class="explainTitle">说明</div>
				<div class="explainDesc">
					借贷申请机构数=按身份证号查询命中机构数+按手机号查询命中机构数
				</div>
			</div>
		</div>

		<div class="reportModel">
			<div class="title" style="height: 40px;">
				<div class="left" style="width:175px">特殊名单验证</div>
			</div>
			<div class="searchTime">
				<div style="width:25%" :class="[searchNameIndex == index ? 'timeItem timeItemActive' : 'timeItem']"
					v-for="(item, index) in searchName" @click="searchNameIndex=index" :key="index">
					{{ item }}
				</div>
			</div>
			<div class="searchContent">
				<div class="searchName" v-for="(item,index) in searchNameData[searchNameIndex]" :key="index">
					<div :class="[item.check ? 'searchNameUp searchNameUpActive' : 'searchNameUp']">
						<div>{{ item.left }}</div>
						<div>{{ item.right }}</div>
					</div>
					<div class="searchNameDown">
						<div>命中次数：{{ item.smallLeft }}次</div>
						<div>最近一次距离今时间：{{ item.smallRight }}</div>
					</div>
				</div>
			</div>
			<div class="explain" style="width:90%">
				<div class="explainTitle">说明</div>
				<div class="explainDesc">
					一般风险：指30/60/90天逾期资信不佳。中风险：客户有过贷款逾期90天以上未还。高风险：客户逾期后失联。<br />
				</div>
			</div>
			<div class="proposal" style="width:90%;margin-bottom:15px;">
				<div class="proposalTitle">建议</div>
				<div class="proposalDesc">
					1、如有逾期请及时还清，保持良好信用。<br />
					2、请履行相关约定，避免发生违约行为。<br />
					3、已命中法院失信名单等，若非本人行为，请联系相关部门进行处理。
				</div>
			</div>
		</div>

		<div class="report-section section07">
			<div class="title">贷款统计</div>
			<div class="content">
				<div class="bottom">
					<table_ :data="data02" />
					<table_ :data="data03" />
					<table_ :data="data04" />
					<table_ :data="data05" />
				</div>
				<div class="proposal">
					<div class="sub">说明</div>
					<div class="p">
						命中当前逾期包含了当前还款失败或者扣款失败，并不代表我们有逾期。。
					</div>
				</div>

			</div>
		</div>

		<div class="report-section section08">
			<div class="title">失信现状</div>
			<div class="content">
				<div class="bottom">
					<table_ :data="data06" />
				</div>
			</div>
		</div>

		<div class="report-section section09">
			<div class="title">履约表现</div>
			<div class="content">
				<div class="content-item">
					<div class="top">
						<div class="p">履约表现</div>
					</div>
					<div class="bottom">
						<div class="bottom-item">
							<div class="left">消费总机构数</div>
							<div class="right">{{ dataLybx[0] }}</div>
						</div>
						<div class="bottom-item">
							<div class="left">消费已结清机构数</div>
							<div class="right">{{ dataLybx[1] }}</div>
						</div>
					</div>
				</div>
				<div class="content-item">
					<div class="top">
						<div class="p">履约现状</div>
					</div>
					<div class="bottom">
						<div class="bottom-item">
							<div class="left">当前是否履约失败</div>
							<div class="right">{{ dataLybx[2] }}</div>
						</div>
						<div class="bottom-item">
							<div class="left">当前履约失败机构数</div>
							<div class="right">{{ dataLybx[3] }}</div>
						</div>
					</div>
				</div>

				<div class="content-item">
					<div class="top">
						<div class="p">交互行为</div>
					</div>
					<div class="bottom">
						<div class="bottom-item">
							<div class="left">交互失败百分比</div>
							<div class="right">{{ dataLybx[4] }}</div>
						</div>
						<div class="bottom-item">
							<div class="left">交互成功百分比</div>
							<div class="right">{{ dataLybx[5] }}</div>
						</div>
					</div>
				</div>

				<div class="content-item">
					<div class="top">
						<div class="p">新增约定笔数（近半年）</div>
					</div>
					<div class="bottom">
						<div class="bottom-item">
							<div class="left">30天内新增消费次数统计</div>
							<div class="right">{{ dataLybx[6] }}</div>
						</div>
						<div class="bottom-item">
							<div class="left">90天内新增消费次数统计</div>
							<div class="right">{{ dataLybx[7] }}</div>
						</div>
						<div class="bottom-item">
							<div class="left">半年内新增消费次数统计</div>
							<div class="right">{{ dataLybx[8] }}</div>
						</div>
					</div>
				</div>

				<div class="content-item" style="padding-bottom: 12.0px">
					<div class="top">
						<div class="p">贷款机构数</div>
					</div>
					<div class="bottom" style="margin-top: 12.0px">
						<div id="echart02" style="width: 100%;height: 126.0px;">
						</div>
					</div>
				</div>

				<div class="content-item">
					<div class="top">
						<div class="p">还款成功数</div>
					</div>
					<div class="bottom" style="margin-top: 12.0px">
						<div id="echart03" style="width: 100%;height: 160.0px;"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="report-section section10">
			<div class="title">行为探针</div>
			<div class="content">
				<table_ :data="data10" />
			</div>
		</div>

		<div class="report-section section11">
			<div class="title">特殊名单验证</div>
			<div class="content">
				<div class="content-item">
					<div class="left">恶意投诉</div>
					<div>{{ labels.indexOf('故意投诉行为') != -1 ? '命中' : '无' }}</div>
					<!-- <div class="right">未命中</div> -->
				</div>
				<div class="content-item">
					<div class="left">涉诈人员</div>
					<div>{{ labels.indexOf('涉诈人员') != -1 ? '命中' : '无' }}</div>
				</div>
				<div class="content-item">
					<div class="left">羊毛党</div>
					<div>{{ labels.indexOf('羊毛党') != -1 ? '命中' : '无' }}</div>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">法院公告{{ detail1.civil.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item">
					<!--                    {{ detail1 }}-->
					<template v-if="detail1.civil.cases">
						<div v-for="(item, index) in detail1.civil.cases" :key="item.id" v-if="pd(item)" class="bottom">
							<div class="item">
								<div class="left">案号</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">案件类型</div>
								<div class="right">{{ item.n_ajlx }}</div>
							</div>
							<div class="item">
								<div class="left">法院</div>
								<div class="right">{{ item.n_jbfy }}</div>
							</div>
							<div class="item">
								<div class="left">诉讼身份</div>
								<div class="right">{{ item.n_ssdw }}</div>
							</div>
							<div class="item">
								<div class="left">立案时间</div>
								<div class="right">{{ item.d_larq }}</div>
							</div>
							<div class="item">
								<div class="left">结案时间</div>
								<div class="right">{{ item.d_jarq }}</div>
							</div>
							<div class="item">
								<div class="left">结案方式</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">执行标的金额</div>
								<div class="right">{{ item.n_sqzxbdje }}</div>
							</div>
							<div class="item">
								<div class="left">判决结果</div>
								<div class="right">{{ item.n_jafs }}</div>
							</div>
							<div class="page">
								此条结束
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">涉案信息{{ detail1.criminal.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item">
					<template v-if="detail1.criminal.cases">
						<div v-for="(item, index) in detail1.criminal.cases" :key="item.id" v-if="pd(item)"
							class="bottom">
							<div class="item">
								<div class="left">案号</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">案件类型</div>
								<div class="right">{{ item.n_ajlx }}</div>
							</div>
							<div class="item">
								<div class="left">法院</div>
								<div class="right">{{ item.n_jbfy }}</div>
							</div>
							<div class="item">
								<div class="left">诉讼身份</div>
								<div class="right">{{ item.n_ssdw }}</div>
							</div>
							<div class="item">
								<div class="left">立案时间</div>
								<div class="right">{{ item.d_larq }}</div>
							</div>
							<div class="item">
								<div class="left">结案时间</div>
								<div class="right">{{ item.d_jarq }}</div>
							</div>
							<div class="item">
								<div class="left">结案方式</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">执行标的金额</div>
								<div class="right">{{ item.n_sqzxbdje }}</div>
							</div>
							<div class="item">
								<div class="left">判决结果</div>
								<div class="right">{{ item.n_jafs }}</div>
							</div>

							<div class="page">
								此条结束
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">案件流程{{ detail1.administrative.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item">
					<template v-if="detail1.administrative">
						<div v-for="(item, index) in detail1.administrative.cases" :key="item.id" v-if="pd(item)"
							class="bottom">
							<div class="item">
								<div class="left">案号</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">案件类型</div>
								<div class="right">{{ item.n_ajlx }}</div>
							</div>
							<div class="item">
								<div class="left">法院</div>
								<div class="right">{{ item.n_jbfy }}</div>
							</div>
							<div class="item">
								<div class="left">诉讼身份</div>
								<div class="right">{{ item.n_ssdw }}</div>
							</div>
							<div class="item">
								<div class="left">立案时间</div>
								<div class="right">{{ item.d_larq }}</div>
							</div>
							<div class="item">
								<div class="left">结案时间</div>
								<div class="right">{{ item.d_jarq }}</div>
							</div>
							<div class="item">
								<div class="left">结案方式</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">执行标的金额</div>
								<div class="right">{{ item.n_sqzxbdje }}</div>
							</div>
							<div class="item">
								<div class="left">判决结果</div>
								<div class="right">{{ item.n_jafs }}</div>
							</div>
							<div class="page">
								此条结束
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">执行公告{{ detail1.implement.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item">
					<template v-if="detail1.implement">
						<div v-for="(item, index) in detail1.implement.cases" :key="item.id" v-if="pd(item)"
							class="bottom">
							<div class="item">
								<div class="left">案号</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">案件类型</div>
								<div class="right">{{ item.n_ajlx }}</div>
							</div>
							<div class="item">
								<div class="left">法院</div>
								<div class="right">{{ item.n_jbfy }}</div>
							</div>
							<div class="item">
								<div class="left">诉讼身份</div>
								<div class="right">{{ item.n_ssdw }}</div>
							</div>
							<div class="item">
								<div class="left">立案时间</div>
								<div class="right">{{ item.d_larq }}</div>
							</div>
							<div class="item">
								<div class="left">结案时间</div>
								<div class="right">{{ item.d_jarq }}</div>
							</div>
							<div class="item">
								<div class="left">结案方式</div>
								<div class="right">{{ item.c_ah }}</div>
							</div>
							<div class="item">
								<div class="left">执行标的金额</div>
								<div class="right">{{ item.n_sqzxbdje }}</div>
							</div>
							<div class="item">
								<div class="left">判决结果</div>
								<div class="right">{{ item.n_jafs }}</div>
							</div>
							<div class="page">
								此条结束
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">限制高消费{{ detail1.bankrupt.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item" v-if="detail1.bankrupt.cases">

					<div v-for="(item, index) in detail1.bankrupt .cases" :key="item.id" v-if="pd(item)" class="bottom">
						<div class="item">
							<div class="left">案号</div>
							<div class="right">{{ item.c_ah }}</div>
						</div>
						<div class="item">
							<div class="left">案件类型</div>
							<div class="right">{{ item.n_ajlx }}</div>
						</div>
						<div class="item">
							<div class="left">法院</div>
							<div class="right">{{ item.n_jbfy }}</div>
						</div>
						<div class="item">
							<div class="left">诉讼身份</div>
							<div class="right">{{ item.n_ssdw }}</div>
						</div>
						<div class="item">
							<div class="left">立案时间</div>
							<div class="right">{{ item.d_larq }}</div>
							<div class="right">{{ item.d_larq }}</div>
						</div>
						<div class="item">
							<div class="left">结案时间</div>
							<div class="right">{{ item.d_jarq }}</div>
						</div>
						<div class="item">
							<div class="left">结案方式</div>
							<div class="right">{{ item.c_ah }}</div>
						</div>
						<div class="item">
							<div class="left">执行标的金额</div>
							<div class="right">{{ item.n_sqzxbdje }}</div>
						</div>
						<div class="item">
							<div class="left">判决结果</div>
							<div class="right">{{ item.n_jafs }}</div>
						</div>

						<div class="page">
							此条结束
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="report-section section12">
			<div class="title">曝光台{{ detail1.preservation.cases ? '' : '（暂无）' }}</div>
			<div class="content">
				<div class="content-item" v-if="detail1.preservation.cases">
					<div v-for="(item, index) in detail1.preservation.cases" :key="item.id" v-if="pd(item)"
						class="bottom">
						<div class="item">
							<div class="left">案号</div>
							<div class="right">{{ item.c_ah }}</div>
						</div>
						<div class="item">
							<div class="left">案件类型</div>
							<div class="right">{{ item.n_ajlx }}</div>
						</div>
						<div class="item">
							<div class="left">法院</div>
							<div class="right">{{ item.n_jbfy }}</div>
						</div>
						<div class="item">
							<div class="left">诉讼身份</div>
							<div class="right">{{ item.n_ssdw }}</div>
						</div>
						<div class="item">
							<div class="left">立案时间</div>
							<div class="right">{{ item.d_larq }}</div>
						</div>
						<div class="item">
							<div class="left">结案时间</div>
							<div class="right">{{ item.d_jarq }}</div>
						</div>
						<div class="item">
							<div class="left">结案方式</div>
							<div class="right">{{ item.c_ah }}</div>
						</div>
						<div class="item">
							<div class="left">执行标的金额</div>
							<div class="right">{{ item.n_sqzxbdje }}</div>
						</div>
						<div class="item">
							<div class="left">判决结果</div>
							<div class="right">{{ item.n_jafs }}</div>
						</div>

						<div class="page">
							此条结束
						</div>
					</div>
				</div>
			</div>
		</div>

		<advice_ content="请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被执行人名单。"></advice_>

		<div class="section13">
			<div class="section-item">
				<div class="p">提高信用评分消除风险的建议</div>
				<div class="content">
					<div class="line">
						<div class="left">1.</div>
						<div class="right">信用卡一年内申请不超过6次，含同一机构，网贷3个月内申请不超过20次，控制申请频率；</div>
					</div>
					<div class="line">
						<div class="left">2.</div>
						<div class="right">如有逾期或被执行等不良记录，保持信用良好1-2年，记录可以滚动覆盖过去。</div>
					</div>

					<div class="line">
						<div class="left">3.</div>
						<div class="right">保持良好的接待习惯，切勿频繁申请，拒绝不明平台的审核邀请；。</div>
					</div>
					<div class="line">
						<div class="left">4.</div>
						<div class="right">减少和网贷黑名单的这类人群的联系，提高自己朋友圈优良信用人群比例</div>
					</div>
				</div>
			</div>

			<div class="section-item">
				<div class="p">大数据报告说明</div>
				<div class="content">
					报告本人授权查询，本报告包含身份校验，借贷风险、失信等多个维度。是根据网络行为综合评估的，不包含个人隐私爬虫数据。只做大数据信息的获取及分析，不对原始数据做任何修改，仅供参考使用。如果你对报告有异议，出于合作平台数据隐私的保护，平台不做任何解释。
				</div>
			</div>
		</div>
		<div class="btn_">
			<div @click="FP()">发票</div>
			<div @click="FX()">分享</div>
		</div>
	</div>
</template>
<script>
	import {
		query
	} from '@/api/jinjian.js'
	import advice_ from "@/components/cc-advice"
	import table_ from "@/components/cc-table"

	import {
		disposeSlc,
		disposeAls
	} from '@/utils/duotouDis'
	import {
		searchData,
		searchNameData
	} from '@/utils/common'
	import {
		bdpTemInfo
	} from '@/utils/temInfo'
	
	import * as echarts from "echarts"

	import {
		data02,
		data03,
		data04,
		data05,
		data06,
		data10,
		data101,
		data102,

		dktjRow,
		sxxzRow,
		lybxRow,
		dataLybx,
		disEdata,
		e3data,
		xwtz10Row,

		yhyqqzfx,
		wlqzslfx
	} from '@/utils/poster.js'

	export default {
		name: 'Report',
		components: {
			advice_,
			table_
		},
		data() {
			return {
				zonghe_grade: 45,
				createTime: '',
				expireTime: '',
				sys_eq: false,

				username: '*模板范例',
				identity: '************103873',
				tel: '*******9999',
				sys_province: '',
				sys_city: '',
				sys_attribute: '',
				orderNo: '',

				mzInfo: [],
				sl_id_allnum: 0,
				sl_cell_allnum: 0,
				myChartStyle: {
					width: "100%",
					height: "400px"
				},

				searchTimeIndex: 0,
				searchName: ['身份证查询', '手机号查询'],
				searchNameIndex: 0,
				searchNameData,

				searchTime: ['近15天', '近1个月', '近3个月', '近6个月', '近12个月'],
				searchpData: [{
						title: '机构类别统计',
						item: ['传统银行', '网络零售银行', '非银-p2p机构汇总', '非银-小贷机构汇总', '非银-现金类汇总', '非银-消费类汇总', '非银-代偿类汇总',
							'非银-其他'
						]
					},
					{
						title: '申请条件统计',
						item: ['通过手机号申请', '通过身份证申请']
					},
					{
						title: '持牌类别统计',
						item: ['持牌小贷', '持牌网络小贷', '持牌消费金融', '持牌汽车金融', '持牌融资租赁']
					},
				],
				searchData,

				tableData1: [],
				tableData2: [],
				tableData3: [],
				data02,
				data03,
				data04,
				data05,
				data06,
				dataLybx,
				data10,
				data101,
				data102,
				labels: [],
				detail1: {
					civil: {
						aa: ''
					},
					criminal: {},
					administrative: {},
					implement: {},
					bankrupt: {},
					preservation: {}
				},

				yData: [0, 0, 0, 0, 0], //申请次数
				taskDate: [0, 0, 0, 0, 0], //申请机构

				dkjgs: [10, 10, 10]
			}
		},
		onLoad(options) {
			this.$modal.loading('获取中....')

			if (options.orderNo) {
				this.orderNo = options.orderNo
				query({
					orderNo: this.orderNo,
					name: '1'
				}).then(res => {
					if (res.code == 200) {
						let data = res.data

						this.hanbleData(data)
						this.$modal.closeLoading()
					} else {
						let msg = data.msg
						if (data.code == 208) {
							msg += '，若您已支付！可在历史订单中查询'
						}
						this.$notify({
							title: '提示',
							message: msg,
							type: 'warning',
							duration: 0,
							onClose: () => {
								this.$router.push('/order')
							}
						})
						this.$modal.msgLoading(data.msg)
					}
				}).catch((e) => {
					this.$modal.msgLoading('查询未支付或您输入的三要素异常')
				})
			} else {
				this.$nextTick(() => {
					this.hanbleData(bdpTemInfo)
					this.$modal.closeLoading()
				})
			}
		},

		methods: {
			pd(item) {
				if (item && item.n_jafs) {
					if (item.n_jafs.includes('结案')) {
						return false
					} else if (item.n_jafs.includes('终结')) {
						return false
					} else if (item.n_jafs.includes('完毕')) {
						return false
					} else {
						return true
					}
				} else {
					return false
				}
			},
			hanbleData(info) {
				this.createTime = info.createTime
				this.expireTime = info.expireTime
				this.username = info.name
				this.identity = info.cardNo
				this.tel = info.mobile

				let data = JSON.parse(info.queryInfo)

				console.log('---data---', data)

				if (data.labels && data.labels.retdata) {
					this.labels = data.labels.retdata
				}

				let grss = data.grss
				if (grss.retcode == '000000') {
					let retdata = grss.retdata
					if (retdata.resultCode == 1) {
						this.detail1 = retdata.detail[0]
					}
				}

				let sjsys = data.sjsys
				console.log('---sjsys---', sjsys)
				if (sjsys.retcode == '000000') {
					let retdata = sjsys.retdata
					this.sys_province = retdata.province
					this.sys_city = retdata.city
					this.sys_attribute = retdata.attribute
					this.sys_eq = retdata.checkResult == '0'
				} else {
					// this.$modal.msg(sjsys.retmsg)
				}

				let dttz = data.dttz
				// console.log('---dttz---', dttz)
				if (dttz.retcode == '000000') {
					let retdata = dttz.retdata
					if (retdata.code == '00') {
						if (retdata.Flag.riskstrategy == '1') {
							this.zonghe_grade = 100 - parseInt(retdata.Rule.result.final_weight);
							console.log('--原始分--', this.zonghe_grade)
							if (this.zonghe_grade >79 && !this.sys_eq) {
								this.zonghe_grade = 50
							}
							console.log('--计算分--', this.zonghe_grade)
						}
						if (retdata.Flag.ruleexecutionlimited == '1') {
							let r = retdata.Rule.hit_rules.ruleexecutionlimited
							for (let key in r) {
								this.mzInfo.push(r[key])
							}
						}
						if (retdata.Flag.rulespeciallist_c == '1') {
							let r = retdata.Rule.hit_rules.rulespeciallist_c
							for (let key in r) {
								this.mzInfo.push(r[key])
							}
						}
						if (retdata.Flag.ruleapplyloan == '1') {
							let r = retdata.Rule.hit_rules.ruleapplyloan
							for (let key in r) {
								this.mzInfo.push(r[key])
							}
						}
						// console.log('--mzInfo--', this.mzInfo)
						if (retdata.Flag.applyloanstr == '1') {
							// console.log('--retdata.ApplyLoanStr--', retdata.ApplyLoanStr)
							let als = disposeAls(retdata.ApplyLoanStr)
							// console.log('--als--', als)
							this.yData = als.allnum
							this.taskDate = als.orgnum

							this.searchData = als.searchData
							this.tableData1 = als.tableData1
							this.tableData2 = als.tableData2
							this.tableData3 = als.tableData3
						}

						console.log('--retdata.Flag.specialList_c--', retdata.Flag.specialList_c)
						if (retdata.Flag.specialList_c == '1') {
							yhyqqzfx(retdata.SpecialList_c)
							wlqzslfx(retdata.SpecialList_c)

							let slc = disposeSlc(retdata.SpecialList_c)
							this.sl_id_allnum = slc.id_allnum
							this.sl_cell_allnum = slc.cell_allnum
							this.searchNameData = slc.searchNameData

							// console.log('--searchNameData--', this.searchNameData)
							// console.log('--sl_cell_allnum--', this.sl_cell_allnum)
							// console.log('--sl_id_allnum--', this.sl_id_allnum)
						}
					} else if (retdata.code == '100002') {
						// 查询成功，但策略配置里全部子产品均未匹配到结果
					} else {
						this.message(dttz.retmsg, "warning");
					}
				} else {
					this.message(dttz.retmsg, "warning");
				}
				this.initEchart00()
				this.initEcharts()

				let jxzs = data.jxzs.retdata
				// console.log('--jxzs--', jxzs)
				dktjRow(jxzs)
				sxxzRow(jxzs)
				lybxRow(jxzs)
				this.dkjgs = [
					disEdata(jxzs.xyp_cpl0009),
					disEdata(jxzs.xyp_cpl0011),
					disEdata(jxzs.xyp_cpl0012)
				]
				// console.log('--this.dkjgs--', this.dkjgs)
				this.initEchart02()
				e3data[0].value = disEdata(jxzs.xyp_cpl0019)
				e3data[1].value = disEdata(jxzs.xyp_cpl0019)
				e3data[2].value = disEdata(jxzs.xyp_cpl0019)
				e3data[3].value = disEdata(jxzs.xyp_cpl0019)

				// console.log('--e3data--', e3data)
				this.initEchart03()
				xwtz10Row(jxzs)
			},

			initEchart00() {
				// 多列柱状图
				this.$nextTick(() => {
					const myChart = echarts.init(document.getElementById("echart00"));
					myChart.setOption({
						series: [{
							name: 'Indicator',
							type: 'gauge',
							detail: {
								show: false
							},
							data: [{
								value: this.sl_id_allnum + this.sl_cell_allnum,
								name: '风险指数（低——>高）',
								title: {
									fontSize: 10
								}
							}],
							center: ["50%", "70%"],
							radius: "100%",
							startAngle: 180,
							endAngle: 0,
							progress: {
								itemStyle: {
									color: 'rgba(249, 5, 5, 1)'
								},
								show: true
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							},
							title: {
								show: true
							},
							max: 10
						}]
					});
					//随着屏幕大小调节图表
					window.addEventListener("resize", () => {
						myChart.resize();
					})
				})
			},

			initEcharts() {
				// 多列柱状图
				const mulColumnZZTData = {
					xAxis: {
						data: ['15天', '1个月', '3个月', '6个月', '12个月']
					},
					// 图例
					legend: {
						data: ["申请次数", "申请机构"],
						top: "0%"
					},
					yAxis: {},
					series: [{
							type: "bar", //形状为柱状图
							data: this.yData,
							name: "申请次数", // legend属性
							label: {
								// 柱状图上方文本标签，默认展示数值信息
								show: true,
								position: "top"
							}
						},
						{
							type: "bar", //形状为柱状图
							data: this.taskDate,
							name: "申请机构", // legend属性
							label: { // 柱状图上方文本标签，默认展示数值信息
								show: true,
								position: "top"
							}
						}
					]
				}
				this.$nextTick(() => {
					const myChart = echarts.init(document.getElementById("mychart"));
					myChart.setOption(mulColumnZZTData);
					//随着屏幕大小调节图表
					window.addEventListener("resize", () => {
						myChart.resize();
					})
				})
			},

			initEchart02() {
				let echart02 = echarts.init(document.getElementById("echart02"));
				let options = {
					xAxis: {
						type: "category",
						data: ['7天', '30天', '90天'],
						axisLabel: {
							color: "#9AA5B5",
							fontSize: "12.0px"
						},
						axisTick: {
							show: false
						}
					},
					tooltip: {
						trigger: 'axis', // 触发类型，可选 'item' 和 'axis'
						axisPointer: { // 坐标轴指示器配置
							type: 'shadow' // 默认为 'line'，可选 'line' | 'shadow'
						}
					},
					grid: {
						left: '10%', // 设置图表内容离左侧的距离
						right: '10%', // 设置图表内容离右侧的距离
						top: '10%', // 设置图表内容离顶部的距离（确保不与标题重叠）
						bottom: '15%' // 设置图表内容离底部的距离
					},
					yAxis: {
						type: "value",
						interval: 5,
						splitLine: {
							show: false
						},
						axisLabel: {
							color: "#9AA5B5",
							fontSize: "12.0px"
						},
					},
					series: [{
						type: "bar", //形状为柱状图
						data: this.dkjgs,
						name: "申请机构数", // legend属性

						stack: "总申请数",
						label: {
							// 柱状图上方文本标签，默认展示数值信息
							show: false,
							position: "top"
						},
						itemStyle: {
							color: "#3170FF"
						},
						barWidth: 20
					}]
				}
				echart02.setOption(options)
				window.addEventListener("resize", () => {
					echart02.resize()
				})

			},

			initEchart03() {
				let sum = e3data.reduce((acc, item) => {
					return acc + item.value
				}, 0)
				var echart03 = echarts.init(document.getElementById("echart03"))
				const options = {
					color: ['#3B6FF6', '#77CEF0', '#5B3BF6', '#77DEA4'], // 颜色数组，按顺序应用
					grid: {
						top: '10%', // 设置图表内容离顶部的距离（确保不与标题重叠）
						bottom: '15%' // 设置图表内容离底部的距离
					},
					legend: {
						// data:["申请次数","申请机构数"],
						top: "50",
						// left:"68",
						orient: 'horizontal',
						left: 'right',
						itemGap: 20,
						width: "50%",
						itemWidth: 6,
						itemHeight: 6,
						textStyle: {
							fontWeight: "normal",
							color: "#9AA5B5",
							fontsize: "24rpx"
						},
						formatter: function(name) {
							var find = e3data.find(item => item.name === name);
							if (find) {
								return `${name}: ${find.value} 笔`
							}
							return `${name}`
						}
					},
					tooltip: {
						trigger: "item",
						formatter: function(params) {
							// return `Series: ${params.name}<br/>Category: ${params.value}<br/>Value: ${params.value}`;
							let rate = ((params.value / sum) * 100).toFixed(2) + "%"
							return rate
						}
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						roseType: 'area',
						radius: ['50%', '90%'], // 设置内外半径，实现环形
						center: ['20%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false, // 隐藏标签
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: e3data
					}],
					graphic: {
						type: 'text',
						left: '10%',
						top: '40%',
						style: {
							text: "", // 设置显示的文字内容
							textAlign: 'center',
							fill: '#000', // 字体颜色
							fontSize: 14, // 字体大小
							fontWeight: 'bold'
						}
					}
				}
				echart03.setOption(options)
				window.addEventListener("resize", () => {
					echart03.resize()
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.report-container {
		min-height: 100vh;
		background: url("@/static/images/bg_.png") no-repeat 0 0, #F5F6FC;

		background-size: contain;
		//padding: 38.0px 10.0px;
		padding: 38.0px 20.0px;
		box-sizing: border-box;

		.title {
			width: 100%;
			height: 90.0px;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.grade-box {
			height: 146.0px;
			width: 146.0px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: url("@/static/images/grade.png") no-repeat center center;
			background-size: contain;

			.grade {
				color: #3170FF;
				font-weight: bold;
				font-size: 40.0px;
				margin-top: 39.0px;
			}

			.desc {
				color: #3170FF;
				margin-bottom: 39.0px;
			}
		}

		.report-section {
			margin-top: 20.0px;
			width: 100%;
			min-height: 100.0px;
			background: url("@/static/images/section-bg.png") no-repeat -14.0px 0;
			background-size: 100% auto;
			background-color: #f0f0f0;
			//background-color: red;

			.title {
				width: 78.0px;
				height: 24.0px;
				color: #fff;
				font-weight: bold;
				font-size: 16.0px;
			}

			.content .proposal {
				border-radius: 8.0px;
				margin-top: 16.0px;
				background: rgba(255, 235, 214, 0.45);
				box-shadow: 0px 4px 14px 0px rgba(106, 145, 218, 0.05), 0px 3px 8px -4px rgba(106, 145, 218, 0.08), inset 0px 0px 3px 0px rgba(255, 255, 255, 0.3);
				font-size: 14px;
				font-weight: 400;
				color: #DF6B14;
				line-height: 24px;

				.sub {
					border-radius: 8.0px 8.0px 0 0;
					width: 204px;
					color: #FFFFFF;
					font-size: 12px;
					p-indent: 4px;
					background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 109, 0, 0.6) 100%);
				}

				.p {
					padding: 8.0px 14.0px;
					font-size: 14.0px;
					color: #DF6B14;
				}
			}
		}

		.section01 {
			height: 262.0px;
			background-color: #fff;
			border-radius: 8.0px;
			box-sizing: border-box;
			padding: 5.0px 16.0px 16.0px;
			position: relative;

			.evaluate-box {
				margin-top: 22.0px;
				display: flex;
				align-items: center;

				.tag {
					color: #3170FF;
					border: 1px solid #3170FF;
					width: 28.0px;
					height: 18.0px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 4px;
					font-size: 10.0px;
				}

				.time {
					color: #94949C;
					font-size: 12.0px;
					margin-left: 3px;
				}
			}

			.explain {
				margin-top: 16.0px;

				.p {
					height: 16.0px;
					line-height: 20.0px;
					color: #646469;
					margin-bottom: 6.0px;
				}

				.box {
					display: flex;
					justify-content: space-between;

					.item {
						width: 57.0px;
						height: 64.0px;
						border-radius: 4px;
						border: 1px solid rgba(49, 112, 255, 0.12);
						background-color: rgba(136, 173, 255, 0.04);
						display: flex;
						flex-direction: column;
						align-items: center;

						.grade {
							color: #001850;
							font-size: 14.0px;
							height: 40.0px;
							line-height: 40.0px;
							//font-weight: bold;
						}

						.desc {
							background-color: rgba(136, 173, 255, 0.10);
							height: 24.0px;
							width: 100%;
							line-height: 24.0px;
							text-align: center;
							color: rgba(0, 24, 80, .5);

						}
					}
				}

			}

			.description {
				//border: 1px solid red;
				margin-top: 10.0px;
				color: #646469;
				font-size: 12.0px;
				line-height: 22.0px;
			}

			.tip-pic {
				position: absolute;
				width: 75.0px;
				height: 75.0px;
				right: 37.0px;
				top: 56.0px;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.section02 {
			padding-bottom: 12.0px;
			// height: 367.0px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			padding: 5.0px 16.0px 16.0px;

			.content {
				.top {
					padding: 16.0px 0;
					box-sizing: border-box;
					height: 107.0px;
					//background-color: red;
					border-bottom: 1px solid rgba(49, 112, 255, 0.20);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.img {
						width: 60.0px;
						height: 47.0px;
					}

					.desc {
						font-size: 14.0px;
						color: #3D3D41;
					}
				}

				.bottom {
					padding-top: 3px;

					.line {
						width: 100%;
						height: 36.0px;
						display: flex;
						align-items: center;
						font-size: 13.0px;
						justify-content: space-between;

						.desc {
							color: #94949C;
						}

						.info {
							max-width: 135.0px;
							color: #3D3D41;
							//white-space: normal;
							word-wrap: break-word;
							p-align: right;
						}
					}
				}
			}
		}

		.section03 {
			box-sizing: border-box;
			background-color: #fff;
			//border: 1px solid #000;
			border-radius: 8.0px;
			// height: 332.0px;
			padding: 5.0px 0px 5.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				//border: 1px solid greenyellow;
				//margin-bottom: 4rpx;
				padding: 16.0px;
				box-sizing: border-box;
				border-radius: 8.0px;

				.risk {
					display: flex;
					justify-content: space-between;

					//border:1px solid red;
					.left {
						width: 75.0px;
						height: 112.0px;
						border: 1px solid rgba(49, 112, 255, 0.12);
						color: #001850;
						background-color: rgba(136, 173, 255, 0.10);
						font-size: 12.0px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.box {
							width: 43.0px;
							height: 40.0px;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: center;

							.line {}
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.line {
							color: #94949C;
							height: 30.0px;
							border: 1px solid rgba(49, 112, 255, 0.12);
							line-height: 30.0px;
							padding-left: 10.0px;
						}
					}

				}

			}

		}

		.section04 {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			// height: 334.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 16.0px;
				box-sizing: border-box;
			}
		}

		.section05 {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			// height: 187.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 16.0px;
				box-sizing: border-box;

				.top {
					font-size: 12.0px;
					width: 100%;

					.box {
						display: flex;

						.item {
							width: 55.0px;
							height: 25.0px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: url("@/static/images/bubble.png") no-repeat center center;
							background-size: 100% 100%;
							//border: 1px solid red;
							color: #3170FF;
							margin-right: 8.0px;
							flex-shrink: 0;
						}

						.item-active {
							color: #fff;
							background: url("@/static/images/bubble-active.png") no-repeat center center;

						}
					}

				}

				.bottom {
					margin-top: 12.0px;
				}
			}
		}

		.section06,
		.section07,
		.section08 {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			// height: 262.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 5.0px 0;
				box-sizing: border-box;

			}

		}

		.section07 {
			// height: 341.0px !important;

			.content {
				.top {
					display: flex;
					align-items: center;

					.block {
						width: 2px;
						height: 12.0px;
						background-color: #3170FF;
						margin-right: 4px;
					}

					.p {
						color: #001850;
					}
				}

				.bottom {
					margin-top: 10.0px;
				}
			}
		}

		.section08 {
			height: 145.0px !important;

			.content {
				.top {
					display: flex;
					align-items: center;

					.block {
						width: 2px;
						height: 12.0px;
						background-color: #3170FF;
						margin-right: 4px;
					}

					.p {
						color: #001850;
					}
				}

				.bottom {
					margin-top: 10.0px;
				}
			}
		}

		.section09 {
			// height: 963.0px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 0 16.0px;
				box-sizing: border-box;

				.content-item {
					padding: 16.0px 0;
					border-bottom: 1px solid rgba(49, 112, 255, 0.20);

					.top {
						height: 24.0px;
						width: max-content;
						background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
						display: grid;
						align-items: end;

						.p {
							color: #3D3D41;
							font-size: 16.0px;
							font-weight: bold;
						}
					}

					.bottom {
						.bottom-item {
							display: flex;
							height: 18.0px;
							justify-content: space-between;
							margin-top: 14.0px;
							font-size: 13.0px;
							color: #3D3D41;

							.left {}

							.right {
								color: #FF8326;
							}
						}
					}
				}

			}
		}

		.section10,
		.section11 {
			// min-height: 678.0px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 5px 0px;
				box-sizing: border-box;
			}
		}

		.section11 {
			// height: 140.0px !important;

			.content {
				padding: 12.0px 16.0px !important;

				.content-item {
					font-size: 13.0px;
					color: #3D3D41;
					height: 18.0px;
					margin-bottom: 14.0px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&:last-of-type {
						margin-bottom: 0;
					}

					.left {}

					.right {
						color: #E40032;
					}
				}
			}
		}

		.section12 {
			// height: 786.0px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;
			padding: 5.0px 0 16.0px;

			.title {
				width: 100%;
				padding-left: 16.0px;
			}

			.content {
				padding: 0 16.0px;
				box-sizing: border-box;

				.content-item {
					padding: 12.0px 0;

					.top {
						font-size: 11.0px;
						color: #646469;
					}

					.bottom {
						font-size: 13.0px;
						color: #94949C;

						.item {
							margin-top: 14.0px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.right {
								color: #3D3D41;
							}
						}

						.page {
							text-align: center;
							margin-bottom: 12px;
							font-size: 11.0px;
						}
					}
				}
			}
		}

		.section13 {
			margin-top: 20.0px;
			border-radius: 8.0px;
			background: linear-gradient(to bottom, rgba(49, 112, 255, 0.15) 0%, rgba(197, 215, 255, 0) 30%, rgba(197, 215, 255, 0) 30%, #fff 100%);
			padding: 6.0px 16.0px 6.0px;
			box-sizing: border-box;

			.section-item {
				//margin-top: 16.0px;
				padding-top: 16.0px;

				.p {
					width: max-content;
					color: #3D3D41;
					font-size: 16.0px;
					font-weight: bold;
					height: 24.0px;
					display: grid;
					align-items: end;
					background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
				}

				.content {
					padding: 12.0px 0 16.0px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(49, 112, 255, 0.20);
					color: #3D3D41;
					font-size: 14.0px;

					.line {
						display: flex;
						color: #3D3D41;
						justify-content: flex-start;

						.left {
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							line-height: 24.0px;
						}

						.right {

							font-size: 14.0px;
							line-height: 24.0px;
						}
					}
				}
			}

			.section-item:last-of-type .content {
				border-bottom: none;
			}
		}
	}

	.fixed {
		bottom: 6px;
		position: fixed;
		z-index: 10;
		p-align: center;
	}

	.btn {
		bottom: 14px;
		right: 20px;
		position: fixed;
		z-index: 10;
		p-align: center;
	}

	.reportModel {
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		background: #feffff;
		border-radius: 10px;
		margin-top: 20px;

		table {
			background-color: #f6f6f6;
			border-radius: 4px;
			border-collapse: collapse;
			font-size: 12px;
			padding: 2px;
			color: #078dff;

			table th,
			td {
				border-bottom: 1px solid black;
				border-color: #EBEEF5;
				text-align: center;
			}

			th {
				background-color: #1d98fe24;
			}

			td {
				padding: 8px 4px;
			}

		}
	}

	.reportModel .title {
		width: 100%;
		display: flex;
	}

	.reportModel .title .left {
		background-image: url();
		height: 45px;
		font-size: 17px;
		color: #00568b;
		background-size: cover;
		width: 123px;
		padding-left: 15px;
		box-sizing: border-box;
		font-weight: 600;
		line-height: 45px;
	}

	.reportModel .fraction {
		display: flex;
		justify-content: space-between;
		padding: 23px 0 15px;
		width: 90%;
	}

	.reportModel .fraction .item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 5px 0;
		box-sizing: border-box;
		background: rgba(26, 116, 255, .04);
		border-radius: 4px;
		border: 1px solid #1a74ff;
		font-size: 14px;
		color: #1a74ff;
		width: 17%;
		align-items: center;
		font-weight: 600;
	}

	.reportModel .charts {
		width: 100%;
		margin-top: 10px;
	}

	.reportModel .fraction .itemActive {
		border: 1px solid rgb(252, 99, 29) !important;
		color: rgb(252, 99, 29) !important;
	}

	.reportModel .reportp {
		color: #999;
		margin: 15px 15px 26px;
		width: 90%;
	}

	.reportModel .resImg {
		height: 58px;
		position: absolute;
		top: 625px;
		right: 25px;
	}

	.reportModel .userInfo {
		display: flex;
		flex-direction: column;
		background: #eaf7ff;
		border-radius: 5px;
		margin: 15px 15px 0;
		padding: 10px 0 10px 15px;
		box-sizing: border-box;
		font-size: 14px;
		color: #4c5253;
		width: 90%;
	}

	.reportModel .reportNumber {
		padding: 15px 0 26px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #333;
		width: 90%;
	}

	.reportModel .tOInfo {
		box-sizing: border-box;
		margin-top: 15px;
		width: 90%;
		display: flex;
		flex-direction: column;
	}

	.reportModel .tOInfo .tOTitle {
		font-size: 15px;
		color: #333;
		margin-bottom: 5px;
	}

	.reportModel .tOInfo .tODesc {
		font-size: 12px;
		color: #999;
	}

	.reportModel .tOInfo .tOList {
		display: flex;
		flex-direction: column;
		background: #fef3ef;
		border-radius: 5px 5px 15px 5px;
		margin-top: 10px;
		padding: 10px 15px 0;
	}

	.reportModel .tOInfo .tOList .tOItem {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333;
		margin-bottom: 15px
	}

	.reportModel .explain {
		margin-top: 15px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.reportModel .explain .explainTitle {
		color: white;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 109, 0, 0.6) 100%);
		padding: 5px 10px;
		box-sizing: border-box;
		font-size: 17px;
		font-weight: 600;
		border-radius: 5px 5px 0 0;
	}

	.reportModel .explain .explainDesc {
		background: rgba(255, 235, 214, 0.45);
		color: #DF6B14;
		padding: 8px 14px;
		box-sizing: border-box;
		font-size: 14px;
		border-radius: 0 0 5px 5px;
		line-height: 24px;
	}

	.reportModel .proposal {
		margin: 15px 0px;
		background-color: rgb(231, 245, 251);
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.reportModel .proposal .proposalTitle {
		color: rgb(7, 141, 255);
		background: linear-gradient(90deg, rgb(188, 237, 255) 0%, rgba(238, 238, 238, 0) 100%);
		padding: 5px 10px;
		box-sizing: border-box;
		font-size: 17px;
		font-weight: 600;
		border-radius: 5px 5px 0 0;
	}

	.reportModel .proposal .proposalDesc {
		background-color: rgb(231, 245, 251);
		color: rgb(47, 158, 255);
		padding: 15px 10px;
		box-sizing: border-box;
		font-size: 14px;
		border-radius: 0 0 5px 5px;
	}

	.reportModel .credit {
		background-image: url("@/static/images/quotaBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 103px;
		margin-bottom: 15px;
		display: flex;
	}

	.reportModel .credit .creditContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8px 0;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 600;
		color: #feffff;
	}

	.reportModel .risk {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #666;
		margin-top: 10px;
		width: 90%;
	}

	.reportModel .risk .riskImg {
		height: 90px;
		margin-top: 10px
	}

	.reportModel .risk .riskp {
		font-size: 12px;
		color: #666;
	}

	.reportModel .hit {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin: 15px 0;
		width: 90%;
	}

	.reportModel .hit .hitContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: #333;
		margin-bottom: 18px;
		font-weight: 600;
	}

	.reportModel .searchTime {
		width: 90%;
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.reportModel .searchTime .timeItem {
		background-color: rgba(0, 130, 240, 0.1);
		color: rgb(0, 130, 240);
		height: 30px;
		border-radius: 8px;
		width: 18%;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
	}

	.reportModel .searchTime .timeItemActive {
		background: #3889ff !important;
		color: white !important;
	}

	.reportModel .searchContent {
		display: flex;
		flex-direction: column;
		width: 90%;
	}

	.reportModel .searchContent .searchTitle {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		position: relative;
		z-index: 10;
		margin: 15px 0;
	}

	.reportModel .searchContent .searchHr {
		position: absolute;
		bottom: 0;
		width: 100px;
		background: #0066ef;
		opacity: .28;
		height: 6px;
	}

	.reportModel .searchContent .searchp {
		font-size: 14px;
		font-weight: 600;
		color: #999;
		padding: 15px 0;
		border-bottom: 0.5px solid #eee;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.reportModel .reportTable {
		display: flex;
		flex-direction: column;
		width: 90%;
	}

	.reportModel .reportTable .tableTitle {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 15px;
	}

	.reportModel .searchContent .searchName {
		display: flex;
		flex-direction: column;
		padding: 15px 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #eee;
	}

	.reportModel .searchContent .searchName .searchNameUp {
		font-size: 14px;
		font-weight: 600;
		color: #999;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.reportModel .searchContent .searchName .searchNameUpActive {
		color: rgb(250, 100, 0) !important;
	}

	.reportModel .searchContent .searchName .searchNameDown {
		font-size: 12px;
		color: #999;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.reportModel .content {
		font-size: 14px;
		color: rgb(153, 153, 153);
		margin-bottom: 0px;
		margin: 15px 0;
		width: 90%;
	}

	.reportModel .implementTitle {
		margin: 9px 0;
		font-size: 14px;
		font-weight: 600;
		color: #333;
		width: 90%;
	}

	.reportModel .implementContent {
		font-size: 14px;
		color: #333;
		background: #f8f8f8;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		padding: 9px;
		box-sizing: border-box;
		width: 90%;
	}

	.reportModel .implementContent .implementItem {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.btn_ {
		position: fixed;
		bottom: 30%;
		right: 0px;
		z-index: 10;

		div {
			writing-mode: vertical-rl;
			background-color: #078dff;
			padding: 6px 4px;
			border-radius: 5px 0 0 5px;
			margin-bottom: 4px;
			color: white;
		}
	}

	.btn_1 {
		width: 35px;
		height: 35px;
		padding: 12px 8px 8px;
		text-align: center;

		border-radius: 50%;
		background-color: #078dff;

		color: white;
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 10;
	}
</style>